<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>活动展示</title>
    <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
    <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">
    <link rel="shortcut icon" href="favicon.ico">
    <link href="css/bootstrap.min.css-v=3.3.5.css"
          rel="stylesheet">
    <link href="css/font-awesome.min.css-v=4.4.0.css"
          rel="stylesheet">
    <link href="css/plugins/footable/footable.core.css"
          rel="stylesheet">

    <link href="css/plugins/dataTables/dataTables.bootstrap.css"
          rel="stylesheet">

    <link href="css/animate.min.css"
          rel="stylesheet">
    <link href="css/style.min.css-v=4.0.0.css"
          rel="stylesheet">
    <link href="layui/css/layui.css">
    <base target="_blank">
    <style>
        #zhuti {
            height: 100%;

        }
        #zhuti::before {
            background: url('img/lg.jpg') no-repeat fixed center;
            background-size: 300px;
            content: "";
            opacity: 0.2;
            /*透明度设置*/
            width: 80%;
            height: 45%;
            margin-top: 10%;
            position: absolute;
        }
    </style>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">

                    <h5>活动展示</h5>
                    <!--<button onclick="correctExport()" class="btn-info" style="float: right">导出Excel</button>-->

                    <div class="ibox-content">
                        <!--表格-->
                        <div id="zhuti">
                        <table  class="table table-striped table-bordered table-hover dataTables-example">
                            <thead>
                            <tr>
                                <th>活动名称</th>
                                <th>活动方</th>
                                <th>申请人</th>
                                <th>借用原因</th>
                                <th>开始时间</th>
                                <th>结束时间</th>
                                <th>申请时间</th>
                                <th>审核状态</th>
                                <th>借用状态</th>
                                <th>操作栏</th>
                            </tr>
                            </thead>
                            <!--表体-->
                            <tbody id="tbody">
<!--                               <tr>-->
<!--                                   <td>test</td>-->
<!--                                   <td>cxc</td>-->
<!--                                   <td>借着玩</td>-->
<!--                                   <td>2022-5-15</td>-->
<!--                                   <td>2022-5-16</td>-->
<!--                                   <td>2022-5-14</td>-->
<!--                                   <td>通过</td>-->
<!--                                   <td>未归还</td>-->
<!--                                   <td>-->
<!--                                       <button>查看详情</button>-->
<!--                                       <a href="#"><button>归还</button></a>-->
<!--                                   </td>-->
<!--                               </tr>-->
                            </tbody>
                        </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
    <script src="js/jquery.min.js-v=2.1.4"></script>
    <script src="js/bootstrap.min.js-v=3.3.5"></script>
    <script src="js/plugins/dataTables/jquery.dataTables.js"></script>
    <script src="js/plugins/dataTables/dataTables.bootstrap.js"></script>
    <script src="layui/layer/layer.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/content.min.js-v=1.0.0"></script>
    <script src="layui/layui.js"></script>
    <script src="layui/excel.js"></script>
    <script>
        let listData = null;
        $(document).ready(function () {

            // 请求数据
            $.ajax({
                type: "GET",
                url: "/user/getAct",
                success: function (msg) {
                    // var msg1=JSON.stringify(msg);
                    // var list=msg1.list;
                    let str = "";//最终的一个实例串
                    let list = msg;//获取list
                    // console.log(msg);
                    listData = msg;
                    let tbody = document.querySelector("#tbody");//获取对象
                    let a = "";
                    let b="";
                    let button1="";
                    let button2="";
                    // target
                    if (list.length != 0) {
                        for (let i = 0; i < list.length; i++) {
                            // let st=list[i].state;
                            let href = list[i].things + "&reason=" + list[i].reason + "&applicant=" + list[i].applicant + "&tel=" + list[i].tel + "&organizer=" + list[i].organizer + "&startTime=" + list[i].startTime + "&endTime=" + list[i].endTime + "&fid=" + list[i].id;
                            let button = "<a style='z-index: 999' target=\"_self\" href= \"historyDetail2.html?things="+ href +"\"><button type=\"button\" style=\"margin-top: 6px;z-index: 999;\" class=\"btn btn-primary btn-xs\">查看详情</button></a>"
                            // let button2="<button id="+list[i].id+" name="+list[i].state+" onclick='cx(this)' style=\"margin-top: 6px;\" class=\"btn btn-warning btn-xs\">撤销</button>"
                            if(list[i].aprStatus=="审批通过"){
                                a="<a><i class=\"fa fa-check text-navy\"></i> 通过</a>";
                            }else if(list[i].aprStatus=="未通过"){
                                a="<a><i class=\"fa fa-close\" style=\"color: #ff0000;\"></i> 未通过</a>";
                            }else if(list[i].aprStatus=="待审批"){
                                a="<a><i class=\"fa fa-hourglass-2\" style=\"color: orange;\"></i> 待审批</a>";
                            }else if(list[i].aprStatus=="未归还"){
                                a="<a><i class=\"fa fa-mail-reply\" style=\"color: blue;\"></i> 未归还</a>";
                            }else if(list[i].aprStatus=="已归还"){
                                a="<a><i class=\"fa fa-trash-o\" style=\"color: dimgrey;\"></i> 已归还</a>";
                            }

                            if (list[i].lendStatus=="未借出"){
                                b="<a><i class=\"fa fa-close\" style=\"color: #ff0000;\"></i>未借出</a>";
                                button2="&nbsp|&nbsp<a style='z-index: 999' target=\"_self\" href= \"bringThingDetail.html?things="+ href +"\"><button type=\"button\" style=\"margin-top: 6px;z-index: 999;\" class=\"btn btn-primary btn-xs\">借出</button></a>"
                            }else if (list[i].lendStatus=="已借出"){
                                b="<a><i class=\"fa fa-check text-navy\"></i>已借出</a>";
                                // button2="<a style='z-index: 999' target=\"_self\" href= \"back.html?things="+ href +"\"><button type=\"button\" style=\"margin-top: 6px;z-index: 999;\" class=\"btn btn-primary btn-xs\">归还</button></a>"
                                button2 = "&nbsp|&nbsp<a style='z-index: 999' target=\"_self\" href=\"backThingDetail.html?fid=" + list[i].id + "\"><button type=\"button\" style=\"margin-top: 6px;z-index: 999;\" class=\"btn btn-primary btn-xs\">归还</button></a>"
                            }else if(list[i].lendStatus=="部分归还"){
                                b="<a><i class=\"fa fa-mail-reply\" style=\"color: blue;\"></i>部分归还</a>";
                                button2 = "&nbsp|&nbsp<a style='z-index: 999' target=\"_self\" href=\"backThingDetail.html?fid=" + list[i].id + "\"><button type=\"button\" style=\"margin-top: 6px;z-index: 999;\" class=\"btn btn-primary btn-xs\">归还</button></a>"
                            }else if(list[i].lendStatus=="已归还"){
                                b="<a><i class=\"fa fa-check text-navy\" style=\"color: dimgrey;\"></i>已归还</a>";
                                button2="";
                            }else if(list[i].lendStatus=="已取消"){
                                b="<a><i class=\"fa fa-close\" style=\"color: dimgrey;\"></i>已取消</a>";
                                button2="";
                            } else {
                                b=""
                            }
                            str += "<tr><td>"+list[i].actName+"</td><td>"+list[i].organizer+"</td><td>" + list[i].applicant + "</td><td>" + list[i].reason + "</td><td>" + list[i].startTime +
                                "</td><td>" +list[i].endTime+"</td><td>"+list[i].applyTime+"</td><td>"+ a + "</td><td>"+b+"</td><td style='z-index: 999'>" + button+button2+"</td></tr>";
                        }
                    }

                    tbody.innerHTML = str;
                    f();
                }
            });
        });


        function f() {
            $(".dataTables-example").dataTable({
                "order": [
                    [6, "desc"]
                ]
            });
            var oTable = $("#editable").dataTable();
            oTable.$("td").edita1ble("http://www.zi-han.net/theme/example_ajax.php",
                {
                    "callback": function (sValue, y) {
                        var aPos = oTable.fnGetPosition(this);
                        oTable.fnUpdate(sValue, aPos[0], aPos[1])
                    },
                    "submitdata": function (value, settings) {
                        return {
                            "row_id": this.parentNode.getAttribute("id"),
                            "column": oTable.fnGetPosition(this)[2]
                        }
                    },
                    "width": "90%",
                    "height": "100%"
                })
        }

        function fnClickAddRow() {
            $("#editable").dataTable().fnAddData(["Custom row", "New row", "New row", "New row", "New row"])
        };


        // 获取表格
        function getExportData() {
            var data = []//数组
            var sj = {}//
            var template = {//json
                col1: '活动名称',
                col2: "活动方",
                col3: '经手人',
                col4: '活动开始时间',
                col5: '活动结束时间',
                col6: '审核状态',
            }
            // console.log(listData)//打印msg
            data.push(template)
            for (var i = 0; i < listData.length; i++) {
                sj = {
                    col1: listData[i].activityname,
                    col2: listData[i].borrower,
                    col3: listData[i].handler,
                    col4: listData[i].borrowingdate,
                    col5: listData[i].returndate,
                    col6: listData[i].situation,
                    // col7: listData[i].
                    // col8: listData[i].detail

                }
                data.push(sj)//添加
            }
            return data
        }


        <!--  导出excel  -->
        function correctExport() {
            layui.use(['layer'], function () {
                layui.layer.alert('正常弹出下载');
                // 直接调用iframe中的导出函数无法弹出下载
                parent.layui.excel.exportExcel(getExportData(), '会议室审批表.xlsx', 'xlsx')
                // 嵌套层级比较多，可以考虑用 top
                // top.LAY_EXCEL.exportExcel([[1, 2, 3]], 'test.xlsx', 'xlsx')
            })
        }
    </script>

<!--    <script type="text/javascript" src="../../../tajs.qq.com/stats-sId=9051096"-->
<!--            charset="UTF-8"></script>-->

</body>
</html>